<template>
  <div class="login-container">
    <!-- <div class="logo">
      <img src="./assets/logo.png" alt="" />
    </div> -->
    <div class="login-body">
      <div class="login-header">
        <!-- <img src="./assets/loginheader.png" alt="" /> -->
        <h2>企业空间管理后台</h2>
      </div>
      <a-form
        :model="loginState.form"
        :rules="rules"
        @finish="submit"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item required has-feedback label="账号" name="account">
          <a-input
            v-model:value="loginState.form.account"
            placeholder="请输入账号"
            size="large"
            style="border-radius: 4px"
            allowClear
          />
        </a-form-item>
        <a-form-item required has-feedback label="密码" name="password">
          <a-input
            v-model:value="loginState.form.password"
            placeholder="请输入密码"
            size="large"
            style="border-radius: 4px"
            allowClear
            type="password"
            autocomplete
          />
        </a-form-item>
        <!-- <a-form-item has-feedback label="手机号" name="phone">
          <a-input
            v-model:value="loginState.form.phone"
            placeholder="请输入手机号"
            size="large"
            style="border-radius: 4px"
            allowClear
          />
        </a-form-item> -->
        <!-- <a-form-item has-feedback label="验证码" name="sms_code">
          <a-input-group compact>
            <a-input
              v-model:value="loginState.form.sms_code"
              placeholder="请输入验证码"
              size="large"
              style="border-radius: 4px 0 0 4px; width: 60%"
              allowClear
            />
            <a-button
              style="width: 40%; border-radius: 0 4px 4px 0"
              size="large"
              @click="sendcode"
              :disabled="codeState.disabled"
            >
              {{ codeState.codeText }}
            </a-button>
          </a-input-group>
        </a-form-item> -->
        <a-form-item :wrapperCol="{ span: 24 }">
          <a-button
            type="primary"
            size="large"
            style="width: 100%; border-radius: 4px"
            html-type="submit"
            :loading="loginState.loading"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
  import { useLogin, useCode } from './login';
  import { message } from 'ant-design-vue';

  export default {
    data() {
      return {
        formLayout: 'horizontal',
        loginForm: null,
        show: false,
      };
    },

    setup(props, context) {
      const { loginState, rules, submit, validateInfos } = useLogin(context);
      const { codeState, sendcode } = useCode(loginState);

      message.destroy();

      return {
        rules,
        submit,
        validateInfos,
        loginState,
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
        codeState,
        sendcode,
      };
    },
  };
</script>

<style lang="scss">
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('./assets/login-bg.png') no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    width: 100vw;

    .logo {
      position: absolute;
      left: 62px;
      top: 62px;
      width: 60px;
      height: 60px;

      img {
        width: 100%;
        height: auto;
      }
    }

    .login-body {
      width: 426px;
      padding: 30px;
      border-radius: 16px;
      background-color: #fff;

      .login-header {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 50px;
        margin-bottom: 25px;

        img {
          height: 100%;
          width: auto;
        }
      }
    }
  }
</style>
